<template>
  <el-row>
    <!--  @click.native='godetails(item)' -->
    <el-col class="mrt hover" v-for="(item,index) in list" :key="item.id">
      <el-col :xl="15" :lg="15">
        <div style="margin-bottom:30px;">
          <router-link tag="a" target="_blank" :to='{path:"/detail",query:{"pid":item.pid}}'>
            <span class="pns">{{item.pns}}</span>
            <span class="tic">{{item.tic}}</span>
          </router-link>
        </div>
        <div class="consulting_head">
          <div class="name" v-if="item.cate_name == '专利保险'">{{item.cate_name}}</div>
          <div class="name zx" v-if="item.cate_name == '职称考试'  ">{{item.cate_name}}</div>
          <div class="name ss" v-if="item.cate_name == '产学合作' ">{{item.cate_name}}</div>
          <div class="name dl" v-if="item.cate_name == '政策咨询' ">{{item.cate_name}}</div>
          <div>
            <p><span class="info_title">公司名称</span>：<span class="info_text">{{item.company}}</span></p>
            <p><span class="info_title">联系人姓名</span>：<span class="info_text">{{item.username}}</span></p>
            <p><span class="info_title">联系人手机号</span>：<span class="info_text">{{item.mobile}}</span></p>
            <p><span class="info_title">联系人邮箱</span>：<span class="info_text">{{item.email}}</span></p>
          </div>
        </div>
      </el-col>
      <el-col :lg="10" :xl="10">
        <p class="content" v-html="item.content">
        </p>
      </el-col>
      <el-col :lg="15" :xl="15">
        <p class="time">
          {{item.ctime}}
        </p>
      </el-col>
      <el-col :lg="15" :xl="15">
        <div :class="!item.show?'el-textarea__inner_po':''" >
          <el-input  type="textarea" resize="none" style="width:500px;margin-top:20px;" v-if="!item.show && item.desc" readonly :value="item.desc" placeholder="请输入内容"></el-input><br/>
        </div>
        <div v-if="rid == 0 && status">
          <el-button  v-if="!item.show"  style="margin-top:10px;"   @click.stop="remarks(index)" class="pubBtn3">备注</el-button>
        </div>
      </el-col>
      <el-col v-if="item.show" :lg="15" :xl="15">
        <p style="margin:20px 0">
          <el-input
          resize="none"
          style="width:500px;"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="item.desc">
          </el-input>
        </p>
        <el-button @click.stop='save(item)' class="pubBtn3">保存</el-button>
      </el-col>
      <el-col style="border-top:1px solid #ddd;margin:20px 0;"  :lg="15" :xl="15">
        <div class="reply_item" v-for="(r,i) in item.reply" :key="i">
          <p>{{r.content}}</p>
          <p class="time">{{r.ctime}}</p>
        </div>
      </el-col>
      <el-col :lg="15" :xl="15" v-if="rid == 0">
        <el-button @click="visible=true" v-if="!visible" type="success">回复</el-button>
        <el-col v-if="visible" :lg="8" :xl="8">
          <el-input
            type="textarea"
            placeholder="请输入内容"
            resize="none"
            v-model="textarea">
          </el-input>
          <el-col style="margin-top:15px;" :lg="24" :xl="24">
            <el-button @click="visible=false" type="info">取消</el-button>
            <el-button @click="reply(item)" type="primary">回复</el-button>
          </el-col>
        </el-col>
      </el-col>
    </el-col>
    <el-col :xl="24">
      <div class="pagination" v-if="page">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.page" :page-size="page.page_size" layout="total, prev, pager, next, jumper" :total="parseInt(page.count)"
          align='left'></el-pagination>
        <!-- parseInt(page.total/10) -->
      </div>
    </el-col>
  </el-row>
</template>

<script>
  import {ContentReply} from "@/api/admin"
  import {mapGetters} from 'vuex'
  export default{
    props:["list","page",'activeIndex','status'],
    data() {
      return {
        textarea:'',
        visible:false
      };
    },
    computed:{
     ...mapGetters([
       'sidebar',
       'avatar',
       'name',
       'roles',
       'type',
       'is_admin_view',
       'rid'
     ]),
    },
    methods:{
      async reply(item){
        try{
          const res = await ContentReply({type:item.type,content_id:item.id,content:this.textarea,user_id:item.user_id})
          this.textarea = ''
          this.visible = true
          this.$message.success("回复成功");
          this.$emit("chat",1)
        } catch (e){
         this.$message.error(e.message);
        }
      },
      remarks(index){
        this.list[index].show  = true
      },
      save(item){
        this.$emit("save",item.id,item.desc)
      },
      handleSizeChange(size){
        this.$emit("handleSizeChange",size,this.activeIndex)
      },
      handleCurrentChange(currentPage){
        this.$emit("handleCurrentChange",currentPage,this.activeIndex)
      },
      // godetails(item){
      //   if(item.pid != ''){
      //     this.$router.push({path:"/detail",query:{"pid":item.pid}})
      //   }
      // }
    }
  }
</script>

<style lang="less" scoped>
  .mrt{
    margin-bottom:30px;
    padding:35px;
  }
.consulting_head{
  display: flex;
  .name{
    width: 97px;
    height: 96px;
    background: #FFFAF3;
    border: 1px solid #F7E5C8;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #EAA870;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    align-items: center;
    margin-right: 12px;
  }
  p{
    margin-bottom:8px;
  }
  .info_text{
    color: #1F2E4D;
    font-size:14px;
    font-weight:400;
  }
  .info_title{
    color: #5072B2;
    font-size:14px;
    font-weight:400;
  }
}
 .content{
    font-size: 14px;
    font-weight: 400;
    color: #3E4A66;
    margin:20px 0;
    word-break: break-word;
  }
  .time{
    font-size: 14px;
    font-weight: 400;
    color: #3E4A66;
    // margin-bottom:28px;
  }
  .hover:hover{
    background-color: #f4f5f7;
    cursor: pointer;
  }
 .consulting_head .dl{
    background: #ECF5FF;
    border: 1px solid #CAE4FF;
    color: #56A5FF;
  }
 .consulting_head .zx{
    background: #F0F9EB;
    border: 1px solid #D5EEC8;
    color: #7DC47F;
  }
  .consulting_head .ss{
     background: #fdf6ec;
     border: 1px solid #f5dab1;
     color: #e6a23c;
   }
  .pns{
    font-size: 18px;
    font-weight: 400;
    color: #2A8B2D;
  }
  .tic{
    font-size: 18px;
    font-weight: 400;
    color: #1F2E4C;
    margin-left: 20px;
  }
  .reply_item{
    padding:15px 0;
    .time{
      margin-top:5px;
    }
  }
</style>
